<template>
  <div class="body">
    <div class="top-board">
      <div class="group">
        <div
          @click="mobilePreview"
          :class="operateIndex == 0 ? 'top-board-select' : ' '"
        >
          <el-icon size="30px"><Cellphone /></el-icon>
          <p>手机预览</p>
        </div>
        <div
          @click="winPreview"
          :class="operateIndex == 1 ? 'top-board-select' : ' '"
        >
          <el-icon size="30px"><Monitor /></el-icon>
          <p>电脑预览</p>
        </div>
        <div @click="backRouter">
          <el-icon size="30px"><CircleClose /></el-icon>
          <p>关闭预览</p>
        </div>
      </div>
    </div>
    <div :class="operateIndex == 0 ? 'center-board-mobile' : 'center-board'">
      <el-form
        :class="
          operateIndex == 0 ? 'center-board-mobile-inner' : 'center-board-form'
        "
        label-width="100px"
        :label-position="labelPosition"
      >
        <div class="title">{{ title }}</div>
        <p style="text-align:center;">{{ content }}</p>

        <div v-for="(element, index) in list">
          <div class="list-group-item-right" v-if="element.type == '602'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-input :placeholder="element.placeholder"></el-input>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '601'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <div
                v-for="(item, index) in element.items"
                style="display: flex; width: 100%"
                :v-if="index == 0"
                :key="index"
              >
                <label style="width: 140px"></label>
                <div v-for="it in item.list">
                  <label>{{ it }}</label>
                </div>
              </div>
              <div
                v-for="(item, index) in element.items"
                style="display: flex; width: 100%"
              >
                <label style="width: 140px">{{ item.title }}</label>
                <div v-for="it in item.list">
                  <el-radio></el-radio>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '10'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-input :placeholder="element.placeholder"></el-input>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '20'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-input
                type="textarea"
                :placeholder="element.placeholder"
                :rows="element.line"
              ></el-input>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '23'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-input :placeholder="element.placeholder"></el-input>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '25'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-input
                :placeholder="element.placeholder"
                type="password"
              ></el-input>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '125'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <esign
                class="esignature"
                ref="esign"
                :width="800"
                :height="200"
                :isCrop="isCrop"
                :lineWidth="lineWidth"
                :lineColor="lineColor"
                :bgColor="bgColor"
                :isEdit="isEdit"
              />
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '30'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-radio-group>
                <el-radio
                  :label="item.title"
                  name="type"
                  aria-checked="false"
                  v-for="item in element.items"
                  :key="item.title"
                ></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '50'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-rate :v-model="element.name"></el-rate>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '27'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <Editor
                v-model="contentValue"
                :init="init"
                :disabled="disabled"
                @onClick="onClick"
              />
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '60'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-select :placeholder="element.placeholder" size="large">
                <el-option
                  v-for="(item, index) in element.items"
                  :key="index"
                  :label="item.title"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '70'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                accept="image/jpeg,image/gif,image/png"
                :on-remove="handleRemove"
                :limit="element.limit"
                disabled="true"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '80'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit="element.limit"
                disabled="true"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '90'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-date-picker
                :type="element.dateType"
                :placeholder="element.placeholder"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '95'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-time-picker
                :type="element.dateType"
                :placeholder="element.placeholder"
              >
              </el-time-picker>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '100'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-slider></el-slider>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '40'">
            <div
              :class="labelPosition == 'top' ? 'index' : 'index-left'"
              v-if="showIndex"
            >
              {{ index + 1 }}.
            </div>

            <el-form-item
              :label="element.label"
              prop="name"
              :rules="[
                { required: element.required, message: element.message },
              ]"
            >
              <el-checkbox-group>
                <el-checkbox
                  :label="item.title"
                  name="type"
                  v-for="item in element.items"
                  :key="item.title"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
        <div style="text-align:center;">
          <el-button type="primary" @click="save">提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script >
import draggable from "vuedraggable";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Eleme,
  Delete,
  Plus,
  CopyDocument,
  Cellphone,
  Monitor,
  CircleClose,
} from "@element-plus/icons-vue";
import esign from "../components/esign.vue";
//富文本
//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
import { httpService } from "@/utils/httpService";

export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  mounted() {
    this.uuid = this.$route.query.p;
    this.queryByUUId();
    tinymce.init({});
  },
  watch: {
    value(newValue) {
      this.contentValue = newValue;
    },
    contentValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  components: {
    draggable,
    Cellphone,
    Monitor,
    CircleClose,
    Eleme,
    Delete,
    Plus,
    Editor,
    esign,
    ElMessageBox,
    httpService,
    CopyDocument,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ",
    },
    toolbar: {
      type: [String, Array],
      default:
        "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                table image media charmap emoticons hr pagebreak insertdatetime print preview | code selectall | indent2em lineheight formatpainter axupimgs",
    },
  },
  data() {
    return {
      operateIndex: 1,
      title: "",
      uuid: "",
      content: "",
      tabVaule: "全局设置",
      labelPosition: "top",
      labelPositionIndex: true,
      daterange: "",
      password: "",
      finishMessage: "您的答卷已经提交，感谢您的参与！",
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "#f2f2f2",
      resultImg: "",
      isEdit: false,
      isCrop: false,
      init: {
        language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
        language: "zh_CN", //语言类型
        skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        // menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        height: 300, //注：引入autoresize插件时，此属性失效
        placeholder: "在这里输入文字",
        branding: false, //tiny技术支持信息是否显示
        resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, //元素路径是否显示

        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        // images_upload_url: '/demo/upimg.php',  //后端处理程序的url
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
      },
      contentValue: this.value,
      showIndex: true,
      isEmpty: true,
      form: {},
      list: [],
      indexGlobal: -1,
      questionnaireId: 0,
    };
  },
  methods: {
    queryByUUId() {
      httpService(
        "/api/qtQuestionnaire/queryByUUId",
        "uuid=" + this.uuid,
        "post"
      ).then((data) => {
        if (data ) {
             this.title = data.title;
                          this.content = data.content;

          this.questionnaireId = data.id;
          let upList = data.qtQuestions;
          if (data.showIndex == 1) {
            this.showIndex = true;
          } else {
            this.showIndex = false;
          }
          this.labelPosition = data.labelPosition;
          if (this.labelPosition == "top") {
            this.labelPositionIndex = true;
          } else {
            this.labelPositionIndex = false;
          }
          this.finishMessage = data.finishMessage;
          this.questionnaireId = data.id;
          for (let i = 0; i < upList.length; i++) {
            upList[i].limit = upList[i].limitCount;
            upList[i].sort = i;
            if (upList[i].required == 1) {
              upList[i].required = true;
            } else {
              upList[i].required = false;
            }
          }
          this.list = upList;
        } else {
          this.$router.push({
            path: "/noFound",
          });
        }
      });
    },
    keyEnter() {
      //回车事件
    },
    //form label显示位置
    changePositon(val) {
      if (val) {
        this.labelPosition = "top";
      } else {
        this.labelPosition = "left";
      }
    },
    backRouter() {
      this.$router.go(-1);
    },
    mobilePreview() {
      this.operateIndex = 0;
    },
    winPreview() {
      this.operateIndex = 1;
    },
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.contentValue = "";
    },
    //移动是否可复制
    cloneMain() {},
    //添加一项
    addItemName() {
      let item = {
        title: "选项" + (this.list[this.indexGlobal].items.length + 1),
      };
      this.list[this.indexGlobal].items.push(item);
    },
    //删除单选多选项
    deleteItemName(idx) {
      if (this.list[this.indexGlobal].items.length > 1) {
        this.list[this.indexGlobal].items.splice(idx, 1);
      } else {
        ElMessage.error("最少保留一项");
      }
    },
    //是否必填提示信息
    changeRadio() {
      let required = this.form.required;
    },
    save() {
      ElMessage.warning("此问卷处于预览模式，仅供浏览，请勿填写！");
    },
    //保存所有
    saveAll() {
      console.log("保存");
      console.log(this.list);
      let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      let upList = JSON.parse(JSON.stringify(this.list));
      for (let i = 0; i < upList.length; i++) {
        upList[i].questionnaireId = this.questionnaireId;
        upList[i].limitCount = upList[i].limit;
        upList[i].sort = i;
        if (upList[i].required) {
          upList[i].required = 1;
        } else {
          upList[i].required = 0;
        }
      }
      params.append("list", JSON.stringify(upList));
      httpService("/api/qtQuestion/batchAdd", params, "post").then((data) => {
        if (data.code == 200) {
          ElMessage.success("保存成功");
          this.getQusetionnaireList();
        } else {
          ElMessage.error("保存失败，请重试！");
        }
      });
    },
    //发布所有
    publishAll() {
      console.log("发布");
    },
    //清空所有
    clearAll() {
      ElMessageBox.confirm("确定要清空本次所有设计吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list = [];
          this.indexGlobal = -1;
          // 调用接口清空，清空后初始化
        })
        .catch(() => {});
    },
    //预览所有
    catAll() {},

    log: function (evt) {},
    sort: function (evt) {
      console.log(evt);
    },

    log2: function (evt) {
      let newIndex = 0;
      if (evt.moved) {
        newIndex = evt.moved.newIndex;
      }
      if (evt.added) {
        newIndex = evt.added.newIndex;
      }
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      this.indexGlobal = newIndex;
      this.tabVaule = "题型设置";
      this.form = this.list[newIndex];
      this.list[newIndex].isSelect = true;
    },

    deleteItem(e, index) {
      this.indexGlobal = -1;
      this.form = {};
      this.list.splice(index, 1);
    },
    copyItem(e, index) {
      this.indexGlobal = -1;
      console.log(this.list);

      let item = JSON.parse(JSON.stringify(this.list[index]));
      this.list.splice(index, 0, item);
      console.log(this.list);
      this.indexGlobal = index + 1;
      this.form = this.list[index + 1];
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      this.list[index + 1].isSelect = true;
    },
    clickItem(index) {
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      this.indexGlobal = index;
      this.tabVaule = "题型设置";
      this.form = this.list[index];
      this.list[index].isSelect = true;
      // 控制右侧显示
      console.log(this.list[index]);
    },

    cloneDog({
      type,
      label,
      isSelect,
      placeholder,
      required,
      line,
      message,
      items,
    }) {
      return {
        type: type,
        label: label,
        isSelect: isSelect,
        placeholder: placeholder,
        required: required,
        line: line,
        message: message,
        items: items,
      };
    },
  },
};
</script>
<style scoped>
.ghost {
  border-top: 4px solid #409EFF;
}
.body {
  background: #f2f2f2;
  height: 100vh;
}
.delete-btn {
  margin-top: 10px;
}
.add-btn {
  margin-left: 80px;
}
.index {
  padding-right: 10px;
}

.index-left {
  padding: 5px;
}
.delete {
  float: right;
  cursor: pointer;
  padding: 5px;
  margin: 10px;
}

.title {
  font-size: 1.5em;
  text-align: center;
}
.list-group-item-right {
  cursor: move;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  background: white;
}

.top-board {
  background: white;
  text-align: center;
  border-bottom: 1px #dfdfdf solid;
  margin-bottom: 10px;
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0;
  color: #333333;
}
.top-board-select {
  background: #409EFF;
  color: white;
}
.top-board .group {
  display: flex;
  margin: 0 auto;
  width: 300px;
  border-right: solid 1px #dfdfdf;
}
.top-board .group div {
  width: 100px;
  padding-top: 20px;
  padding-bottom: 0px;

  cursor: pointer;
  border-left: solid 1px #dfdfdf;
}

.top-board .group div p {
  margin-top: 0px;
}

.mb-3 {
  padding: 10px;
}
.operate {
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  text-align: right;
  font-size: 17px;
  padding-left: 20px;
  white-space: nowrap;
  background: white;
  padding-right: 20px;
}
.logo {
  color: #333333;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  padding-left: 10px;
  white-space: nowrap;
}

.logo-bottom {
  border-top: solid #dedede 1px;
  border-right: solid #dedede 1px;
  height: calc(100vh - 60px);
  padding: 10px;
}
.sub-title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  min-width: 100px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.list-group-item-left {
  cursor: move;
  width: 50%;
}
.list-group-item-left .components-item {
  display: inline-block;
  width: calc(100% - 8px);
  margin: 4px;
  -webkit-transition: -webkit-transform 0ms !important;
  transition: -webkit-transform 0ms !important;
  transition: transform 0ms !important;
  transition: transform 0ms, -webkit-transform 0ms !important;
}

.item {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.components-body:hover {
  border: 1px solid #409EFF;
  color: #409EFF;
}

.components-body {
  color: #707070;
  font-size: 12px;
  border: 1px solid #eaeaea;
  background-color: #fff;
  padding: 8px 10px;
  font-size: 12px;
  cursor: move;
  text-align: center;
  border-radius: 3px;
}

.components-title {
  font-size: 14px;
  color: #222;
  margin: 10px 2px;
  font-weight: bold;
}

.center-board {
  position: fixed;
  height: calc(100vh - 96px);
  margin: 0 auto;
  top: 96px;
  left: 0px;
  right: 0px;
  background: #f2f2f2;
  bottom: 0px;

  overflow: scroll;
}

.center-board-form {
  width: 70%;
  margin: 0 auto;
  padding-top: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 30px;
  background: white;
}

.center-board-mobile {
  width: 375px;
  position: fixed;
  height: calc(100vh - 176px);
  margin: 0 auto;
  top: 106px;
  left: 0px;
  right: 0px;
  bottom: 10px;
  background: white;
  overflow: scroll;
  padding-top: 30px;
  padding-bottom: 30px;
}

.center-board-mobile-inner {
 
}

.right-content {
  width: calc(100% - 37px);
  height: calc(100vh - 60px);
  padding: 10px;
  overflow: auto;
}

.el-form-item--default {
  --font-size: 14px;
  --el-form-label-font-size: var(--font-size);
  margin-bottom: 18px;
  width: 100%;
}

.esign {
  max-width: 1000px;
  margin: auto;
  padding: 10px;
}
.esigh-btns button {
  color: #fff;
  height: 40px;
  width: 100px;
  font-size: 16px;
  margin-right: 10px;
  outline: none;
  border-radius: 4px;
  background: #f60;
  border: 1px solid transparent;
}
.esigh-btns button:active {
  color: #fff;
  box-shadow: 0px 0px 50px orangered inset;
}
.esigh-result {
  margin-top: 10px;
}
.esigh-result img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ececee;
}
.esignature {
  margin: 10px 0;
  border: 1px solid #79bbff;
  border-radius: 4px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}
h3 {
  padding-left: 10px;
}
</style>

